<template>
  <div>
    <div>
      <van-nav-bar
        title="修改密码"
        left-text=""
        right-text=""
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickLeft"
      />
      <van-form validate-first>

        <!-- 通过 validator 进行函数校验 -->
        <div style="color: black; float: left">
        <van-field
          v-model="value1"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ validator, message: '请按格式输入正确的密码' }]"
        />
        </div>
        <van-field
          v-model="value2"
          name="密码"
          label="密码"
          type="password"
          placeholder="请再次输入密码"
          :rules="[{ validator:this.validator1, message: '' }]"
        />
      </van-form>
      <van-notice-bar  wrapable color="#1989fa" background="#ecf9ff" left-icon="info-o" :scrollable="false">
        密码长度8-32位，须包含数字、字母、大写字母，小写字母，特殊字符中的三种
      </van-notice-bar>
    </div>
    <div style="margin: 16px;" @click="commit">
      <van-button round block type="info" native-type="submit">确认</van-button>
    </div>
  </div>
</template>

<script>
  import { Notify } from 'vant';
  import axios from 'axios'
    export default {
        name: "updatePassword",
      data() {
        return {
          value1: '',
          value2: '',
          value3: '请按格式输入正确的密码'
        }
      },
      methods: {
        validator(val) {
          var regex = new RegExp('^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,30}$');
          return regex.test(val);
        },
        validator1(val) {
          var regex = new RegExp('^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,30}$');
          if(regex.test(val)){
            if(this.value1==this.value2){

              return true;
            }else {
              Notify({ type: 'warning', message: '两次密码不一致' });
              return false;
            }
          }
          return false;
        },
        onClickLeft(){
          this.$router.go(-1);
        },
        commit(){
             axios.post("api/user/updateinformation",{id:sessionStorage.getItem("id"),password:this.value1})
               .then(res=>{
                 if(res.data.code==200){
                   this.$router.go(-1);
                   Notify({ type: 'success', message: '修改成功' });
                 }

               })
        }

      }
    }
</script>

<style scoped>

</style>
